<template>
  <div>
    <div class="login-head">
      <span style="color: #fff" @click="jumpFn()">
        <van-icon name="arrow-left"
      /></span>
      <span class="login-title">我的优惠</span>
      <span></span>
    </div>
    <div class="Tba">
      <van-tabs v-model="active">
        <van-tab title="红包">
          <div class="hb-sit">
            <p>有<span style="color: red">3</span>个红包即将到期</p>
            <p>
              <span>
                <img
                  src=""
                  style="width: 0.4595rem"
                /><span
                  class="content_title_style"
                  style="margin-right: 0.2703rem"
                  @click="jumpHongbaoSm()"
                  >红包说明</span
                >
              </span>
            </p>
            <!-- <p>{{idVal}}</p> -->
          </div>
          <ul class="honbao-list">
            <li v-for="(v, i) in hongbaolist" :key="i">
              <div class="hongbao-leftB">
                <p class="amount">
                  <span class="logo-money">￥</span>
                  <span class="amount-money">{{ v.amount }}</span>
                  <span class="logo-money">.</span>
                  <span class="logo-money">{{ v.amount }}</span>
                </p>
                <p class="left-mj">{{ v.description_map.sum_condition }}</p>
              </div>
              <div class="hongbao-right">
                <div class="item-left">
                  <h4>{{ v.name }}</h4>
                  <p>{{ v.description_map.validity_periods }}</p>
                  <p>{{ v.description_map.phone }}</p>
                </div>
              </div>
              <div class="time-right">
                <p>{{ v.description_map.validity_delta }}</p>
              </div>
              <div class="limit-map" v-if="v.limit_map != null">
                <p>{{ v.limit_map.restaurant_flavor_ids }}</p>
              </div>
            </li>
          </ul>
          <div class="historyHB" @click="jumpHistoryHB()">查看历史红包></div>
          <div class="overLink">
            <div @click="jumpDhHb()">兑换红包</div>
            <div @click="jumpTjyj()">推荐有奖</div>
          </div>
        </van-tab>

        <van-tab title="商家代金券">
          <div class="hb-sit">
            <p></p>
            <p>
              <span>
                <img
                  src=""
                  style="width: 0.4595rem"
                /><span
                  class="content_title_style"
                  style="margin-right: 0.2703rem"
                  @click="jumpDjjSm()"
                  >商家代金券说明</span
                >
              </span>
            </p>
            <!-- <p>{{idVal}}</p> -->
          </div>
          <div class="over">
            <img src="" alt="">
            <p class="p1">无法使用代金券</p>
            <p class="p2">非客户端或者客户端版本太低</p>
            <van-button type="primary" @click="jumpElmApp()">下载或升级客户端</van-button>
          </div>
        </van-tab>
      </van-tabs>
    </div>

    <router-view class="animated fadeInRightBig"></router-view>
  </div>
</template>

<script>
import elmAppVue from './elmApp.vue';
// import { mapState } from "vuex";
export default {
  name: "daijinjuan",
  data() {
    return {
      active: 0,
      hongbaolist: "",
    };
  },
  mounted() {},
  methods: {
    jumpFn() {
      this.$router.push({
        name:"myVal"
      });
    },
    jumpHongbaoSm() {
      this.$router.push({
        name: "hongbaoSm",
      });
    },
    jumpDjjSm() {
      this.$router.push({
        name: "djjSm",
      });
    },
    jumpHistoryHB() {
      this.$router.push({
        name: "historyHB",
      });
    },
    jumpDhHb(){
       this.$router.push({
        name: "dhHb",
      });
    },
    jumpTjyj(){
      this.$router.push({
        name:"tjyj"
      })
    },
    jumpElmApp(){
      this.$router.push({
        name:"elmApp"
      })
    }
  },
  created() {
    let api =
      "https://elm.cangdu.org/promotion/v2/users/1/hongbaos?limit=20&offset=0;";
    this.$http({
      url: api,
      method: "get",
      user_id: 1,
    }).then((res) => {
      console.log(res);
      this.hongbaolist = res.data;
    });
  },
};
</script>

<style scoped>
.over {
  margin: 0 auto;
  text-align: center;
  margin-top: 2.7027rem;
}
.over img {
  width: 3.8008rem;
  height: 2.1622rem;
}
.p1 {
  color: #999;
  font-size: 0.4324rem;
  margin: 0.2534rem 0 0;
}
.p2 {
  color: #666;
  font-size: 0.3514rem;
  margin: 0.1919rem 0;
}
.overLink div {
  width: 50%;
  background-color: #fff;
  box-sizing: border-box;
  font-size: 0.4324rem;
  color: #555;
  display: flex;
  align-items: center;
  justify-content: center;
}
.overLink div:nth-child(1) {
  border-right: 0.027rem solid rgb(245, 245, 245);
}
.overLink {
  display: flex;
  justify-content: space-between;
  position: fixed;
  width: 100%;
  height: 1.2703rem;
  bottom: 0;
  left: 0;
}
.historyHB {
  width: 100%;
  text-align: center;
  margin-top: 2.027rem;
  color: #999;
  font-size: 0.4054rem;
}
.login-head {
  width: 100%;
  height: 1.2576rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: #0092e8;
  position: fixed;
  top: 0;
  left: 0;
}
.login-title {
  color: white;
  position: relative;
  left: -0.5405rem;
  font-size: 0.5405rem;
}
.Tba {
  margin-top: 1.3514rem;
}
.hb-sit {
  display: flex;
  justify-content: space-between;
  font-size: 0.3514rem;
  line-height: 1.2162rem;
}
.hb-sit > p:nth-child(1) {
  color: #333;
  margin-left: 0.2703rem;
}
.hb-sit > p:nth-child(2) {
  color: #3190e8;
  /* margin-right: 0.2703rem; */
}
.honbao-list li {
  width: 9.2973rem;
  height: 2.7297rem;
  margin: 0 auto;
  position: relative;
  background-color: #fff;
  margin-bottom: 0.4054rem;
  font-size: 0.3514rem;
  /* padding: 0.5405rem; */
  box-sizing: border-box;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.hongbao-leftB {
  width: 2.1892rem;
  height: 1.5946rem;
  border-right: 0.027rem solid #ccc;
  margin: 0 !important;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}
.hongbao-right {
  width: 5.1351rem;
  height: 1.5946rem;
}
.amount-money {
  color: #ff5340;
  font-size: 0.973rem;
}
.logo-money {
  font-size: 0.4324rem;
  color: #ff5340;
}
.left-mj {
  color: #ff5340;
  font-size: 0.3243rem;
}
.item-left h4 {
  color: #666;
}
.item-left p {
  color: #999;
}
.time-right {
  margin-bottom: 1.3784rem;
  margin-right: 0.2703rem;
  color: #ff5340;
  font-size: 0.4757rem;
}
.honbao-list li {
  background: #fff
    url()
    repeat-x;
}
.limit-map {
  width: 9.2973rem;
  height: 1.3716rem;
  background-color: #f9f9f9;
  position: absolute;
  display: flex;
  align-items: center;
  top: 2.7027rem;
  color: #999;
  box-sizing: border-box;
  padding: 0 0.2162rem;
}
</style>